{% extends "services/services_base.html" %}
{% load i18n %}
{% load guardian_tags %}

{% block body %}
<div class="twocol">
  <h3>{{service.title|default:service.name}}</h3>
      <p><strong>{% trans "Type" %}:</strong> {{service.service_type}}</p>
      <p><strong>{% trans "URL" %}:</strong> {{service.base_url}}</p>
      <p><strong>{% trans "Abstract" %}:</strong> {{service.abstract}}</p>
      <p><strong>{% trans "Keywords" %}:</strong> {{ service.keywords.all|join:", " }}</p>
      <p><strong>{% trans "Contact" %}:</strong> <a href="{% url "profile_detail" service.owner.username %}">{{ service.owner }}</a></p>

    {% autoescape off %}
        <h3>{% trans "Service Resources" %} <span class="badge">{{ total_resources }}</span></h3>
        {% if total_resources == 0 %}
            <p>{% trans "No resources have been imported yet." %}</p>
        {% else %}
            <div class="row">
            <table class="table">
                <thead>
                <th>{% trans "Title" %}</th>
                <th>{% trans "Description" %}</th>
                </thead>
                {% for job in resource_jobs %}
                    <tr>
                        <td>{{job.resource_id}}</td>
                        <td>
                            <div class="row">
                                <div class="col-md-9">
                                    {{job.status}} - {{ job.details }}
                                </div>
                                {% if job.status != 'PROCESSED' %}
                                    <div class="btn-group pull-right">
                                        <button title="{% trans "Retry job" %}" class="btn" name="retry-{{ job.resource_id }}"><i class="fa fa-refresh fa-fw" aria-hidden="true"></i></button>
                                    </div>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                {% for service in services %}
                    <tr>
                        <td><a href='{%  url "service_detail" service.id %}'>{{service.title|striptags}}</a></td>
                        <td>{{service.abstract|striptags}}</td>
                    </tr>
                {% endfor %}
                {% for layer in layers %}
                    {% if layer.group != "background" %}
                        <tr>
                            <td><a href='{{ layer.get_absolute_url }}'>{{layer.title|striptags}}</a></td>
                            <td>{{layer.abstract|striptags}}</td>
                        </tr>
                    {% endif %}
                {% endfor %}
            </table>
            </div>
        {% endif %}
    {% if resources.paginator.num_pages > 1 %}
        <div class="row">
            <nav aria-label="importable resources pages">
                <ul class="pagination hidden-xs pull-right">
                    {% if resources.has_previous %}
                        <li><a id="previous" aria-label="Previous" href="?page={{ resources.previous_page_number }}">{% trans "previous" %}</a></li>
                    {% else %}
                        <li class="disabled"><a aria-label="Previous" href="#">{% trans "previous" %}</a></li>
                    {% endif %}
                    <li class="active"><a href="#">{{ resources.number }}/{{ resources.paginator.num_pages }}</a></li>
                    {% if resources.has_next %}
                        <li><a aria-label="{% trans "Next" %}" href="?page={{ resources.next_page_number }}">{% trans "next" %}</a></li>
                    {% else %}
                        <li class="disabled"><a aria-label="{% trans "Next" %}" href="#">{% trans "next" %}</a></li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    {% endif %}
    {% endautoescape %}
    <div class="modal fade" data-backdrop="static" data-keyboard="false" id="progressModal" tabindex="-1" role="dialog" aria-labelledby="progressModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    {% trans "Connecting to service..." %}
                </div>
                <div class="modal-body">
                    <div class="progress" id="serviceRegisterProgress">
                        <div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}
{% block sidebar %}


    {% get_obj_perms request.user for service as "resource_perms" %}

    {% comment %}{% if "change_service" in resource_perms or "remove_service" in resource_perms or "change_service_permissions" in resource_perms %}{% endcomment %}
    <ul class="list-group">
        <li class="list-group-item"><h3>{% trans "Manage" %}</h3></li>

        {% comment %}{% if "change_service" in resource_perms %}{% endcomment %}
            <li class="list-group-item"><a class="btn btn-default btn-md btn-block" href="{% url "edit_service" service.id %}">{% trans "Edit Service Metadata" %}</a></li>
            <li class="list-group-item"><a id="harvestResources" class="btn btn-default btn-md btn-block" href="{% url "harvest_resources" service.id %}">{% trans "Import Service Resources" %}</a></li>
        {% comment %}{% endif %}{% endcomment %}
        {% comment %}{% if "remove_service" or "delete_service" in resource_perms %}{% endcomment %}
            <li class="list-group-item"><a class="btn btn-default btn-md btn-block" href="{% url "remove_service" service.id %}">{% trans "Remove Service" %}</a></li>
        {% comment %}{% endif %}{% endcomment %}
      </ul>
    {% comment %}{% endif %}{% endcomment %}
{% endblock %}
{% block extra_script %}
    {{ block.super }}
    <script type="text/javascript">
        $(document).ready(function () {
            $('#harvestResources').on("click", function() {
                $("#progressModal").modal("show");
            });
            $('button[name^=retry]').on('click', function () {
                const resourceId = this.name.replace("retry-", "");
                const retryUrl = "/services/{{ service.id }}/harvest/" + resourceId;
                const retryForm = document.createElement('form');
                retryForm.setAttribute("method", "post");
                retryForm.setAttribute("action", retryUrl);
                const csrfInputElem = document.createElement("input");
                csrfInputElem.type = "hidden";
                csrfInputElem.name = "csrfmiddlewaretoken";
                csrfInputElem.value = "{{ csrf_token }}";
                retryForm.appendChild(csrfInputElem);
                document.body.appendChild(retryForm);
                retryForm.submit();

            });
        });
    </script>
{% endblock extra_script %}
